<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown  active"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Online Journal</h1>
					<h1 class="title">Creative Bits And Bobs</h1>
						<h1 class="intro">
							Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
							<span>reflect </span> or adapt to individual voices and content.
						</h1>
					</div>
				</div>
			</div>
		<div class="container wrapper">
	<div class="inner_content">
		<div class="row pad30">
		
	<!--post 1-->	
			<div class="col-md-9 pad25">
			<div class="hover_img">
				<a href="img/large/4.jpg" data-rel="prettyPhoto">
				<img src="img/large/4.jpg" alt=""></a>
			</div>
			<div class="row">	
			
			<!--date-->
			<div class="col-md-1 hidden-xs hidden-sm pad25">	
			<div class="btn btn-medium btn-rounded btn-blog1">
				29<br>MAY<br>
				<i class="fa fa-comments fa-2x"></i><br>
				<a class="com_no" href="#">23</a>
			</div>
		</div>
		<div class="col-md-1 hidden-lg hidden-md pad25">	
				<div class="btn btn-medium btn-rounded btn-blog2">
					29 MAY <i class="fa fa-comments fa-2x"></i> <a class="com_no" href="#">23</a>
				</div>
			</div>
			
			<div class="col-md-11">
			<h1 class="post_link"><a href="blog_post.html">Donec iaculis metus vitae ligula </a></h1>
			
			<div class="post-meta muted">
			<ul>
				<li>Posted by <a href="#">admin</a> </li>
				<li>in <a href="#">web</a>, <a href="">graphics</a> </li>
				<li>tags <a href="#">prints</a>, <a href="">design</a> </li>
			</ul>
				</div>
				
			<p>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, 
			suspendisse ac nec et. Nulla sed mauris, congue duis proin nonummy adipiscing vitae  Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien 
			tristique facilisis venenatis risus. Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tristique.
			Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
			<a href="#">[&#8230;]</a></p>
			
			<div class="read_more"><a href="blog_post.html">READ MORE &rarr;</a></div>
			<div class="pad30"></div>
		</div>
			</div>
	<!--//post 1-->
		
		
	<!--post 2-->
		<div class="col-md-12 pad15">
		<div class="row">	
		<!-- carousel starts -->
			<div id="carousel" class="carousel slide ">
				<div class="carousel-inner blog_slide">
					<div class="item active">
						<img src="img/large/2.jpg" alt="" />
							</div>
							
						<div class="item">
							<img src="img/large/1.jpg" alt="" />
						</div>
						
						<div class="item">
							<img src="img/large/5.jpg" alt="" />
						</div>
							</div>
                                <a class="left carousel-control" href="#carousel" data-slide="prev"></a>
                                <a class="right carousel-control" href="#carousel" data-slide="next"></a>
                          </div>
					<div class="row">
			<!--date-->
			<div class="col-md-1 hidden-xs hidden-sm pad25">	
			<div class="btn btn-medium btn-rounded btn-blog1">
				29<br>MAY<br>
				<i class="fa fa-comments fa-2x"></i><br>
				<a class="com_no" href="#">23</a>
			</div>
		</div>
		<div class="col-md-1 hidden-lg hidden-md pad25">	
				<div class="btn btn-medium btn-rounded btn-blog2">
					29 MAY <i class="fa fa-comments fa-2x"></i> <a class="com_no" href="#">23</a>
				</div>
			</div>
			
			<div class="col-md-11">
			<h1 class="post_link "><a href="blog_post.html">Class aptent taciti sociosqu ad</a></h1>
			
			<div class="post-meta muted">
			<ul>
				<li>Posted by <a href="#">admin</a> </li>
				<li>in <a href="#">editorial</a>, <a href="">graphics</a> </li>
				<li>tags <a href="#">illustration</a>, <a href="">design</a> </li>
			</ul>
				</div>
			<p>
				Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, 
				suspendisse ac nec et. Nulla sed mauris, congue duis proin nonummy adipiscing vitae  Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien 
				tristique facilisis venenatis risus. Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tristique.
				Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
				<a href="#">[&#8230;]</a>
			</p>
			<div class="read_more">
				<a href="blog_post.html">READ MORE &rarr;</a></div>
				<div class="pad30"></div>
			</div>
		</div>
		<!--//post 2-->
		
	<!--post 3-->
		<div class="col-md-12 pad15">
		<div class="row">	
		<!-- video starts -->
			<div class="vendor">
            <iframe src="http://player.vimeo.com/video/59653641?title=0&amp;byline=0&amp;portrait=0"></iframe>
          </div>
		<div class="row">	
		<!--date-->
			<div class="col-md-1 hidden-xs hidden-sm pad25">	
			<div class="btn btn-medium btn-rounded btn-blog1">
				29<br>MAY<br>
				<i class="fa fa-comments fa-2x"></i><br>
				<a class="com_no" href="#">23</a>
			</div>
		</div>
		<div class="col-md-1 hidden-lg hidden-md pad25">	
				<div class="btn btn-medium btn-rounded btn-blog2">
					29 MAY <i class="fa fa-comments fa-2x"></i> <a class="com_no" href="#">23</a>
				</div>
			</div>
		
		<div class="col-md-11">
			<h1 class="post_link"><a href="blog_post.html">Mauris sed nulla sed egestas</a></h1>
			
			<div class="post-meta muted">
		<ul>
			<li>Posted by <a href="#">admin</a> </li>
			<li>in <a href="#">video</a>, <a href="">vimeo</a> </li>
			<li>tags <a href="#">watch</a>, <a href="">purchase</a> </li>
		</ul>
			</div>
				
			<p>
				Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, 
				suspendisse ac nec et. Nulla sed mauris, congue duis proin nonummy adipiscing vitae  Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien 
				tristique facilisis venenatis risus. Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tristique.
				Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
				<a href="#">[&#8230;]</a>
			</p>
			
			<div class="read_more"><a href="blog_post.html">READ MORE &rarr;</a></div>
			<!--end post-->
			<div class="pad30"></div>
		</div>
		</div>
		<!--//post 3-->
		
	<!--post 4-->
		<div class="col-md-12 pad15">
		<div class="row">	
		<!-- soundcloud starts -->
			<iframe class="soundcloud" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/28561082"></iframe>
			<div class="row">	
			<!--date-->
			<div class="col-md-1 hidden-xs hidden-sm pad25">	
			<div class="btn btn-medium btn-rounded btn-blog1">
				29<br>MAY<br>
				<i class="fa fa-comments fa-2x"></i><br>
				<a class="com_no" href="#">23</a>
			</div>
		</div>
		<div class="col-md-1 hidden-lg hidden-md pad25">	
				<div class="btn btn-medium btn-rounded btn-blog2">
					29 MAY <i class="fa fa-comments fa-2x"></i> <a class="com_no" href="#">23</a>
				</div>
			</div>
		
		<div class="col-md-11">
			<h1 class="post_link "><a href="blog_post.html">Sociosqu ad litora torquent</a></h1>
			
			<div class="post-meta muted">
			<ul>
				<li>Posted by <a href="#">admin</a> </li>
				<li>in <a href="#">web</a>, <a href="">music</a> </li>
				<li>tags <a href="#">soundcloud</a>, <a href="">dj</a> </li>
			</ul>
				</div>
				
			<p>
				Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, 
				suspendisse ac nec et. Nulla sed mauris, congue duis proin nonummy adipiscing vitae  Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien 
				tristique facilisis venenatis risus. Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tristique.
				Quisque ligulas ipsum, euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
				<a href="#">[&#8230;]</a>
			</p>
			
			<div class="read_more"><a href="blog_post.html">READ MORE &rarr;</a></div>
			<!--end post-->
			
			<div class="pagination pad25">
				<ul>
					<li class="disabled"><a href="#">&laquo;</a></li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
					</div>
						</div>
			<!--end pager-->
			</div>
				</div>
					</div>
						</div>
					</div>
				</div>
			</div>
		</div>
				
		<!--sidebar-->
		
			<div class="sidebar col-md-3">
		
			<h3>About Us</h3>
			<h5>Morbi blandit ultricies ultrices ivam us nec lectus sed orci voluptua oportere molestie.
			Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus, 
			suspendisse ac nec et.</h5>
			
			<h3 class="pad15">Categories</h3>
			<ul class="fa-ul">
				<li><i class="fa-li fa fa-caret-right grey2"></i><a href="#">Design News</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Typography</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Premium Themes</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Photography</a></li>
				<li><i class="fa-li fa fa-caret-right grey2"></i><a  href="#">Graphics</a></li>
			</ul>
			<div class="pad25"></div>
			
			<!--search-->
			<input type="text" placeholder="search">
		
				<h4 class="pad25">Popular Posts</h4>
					<ul class="media-list">
							<li class="media">
								<img class="pull-left img-rounded" src="img/small/pop_post1.jpg" alt="" />
								<div class="media-body">
								<small class="muted">07/05/13</small><br>
								<a href="#">Aliquam convallis erat a enim dictum gravida nulla</a></div>
							</li>
							
							<li class="media">
								<img class="pull-left img-rounded" src="img/small/pop_post2.jpg" alt="" />
								<div class="media-body">
								<small class="muted">29/04/13</small><br>
								<a href="#">Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugia</a></div>
							</li>
							
							<li class="media">
								<img class="pull-left img-rounded" src="img/small/pop_post3.jpg" alt="" />
								<div class="media-body">
								<small class="muted">23/04/15</small><br>
								<a href="#">Mauris sed nulla sed, egestas feugiat a dictum libero</a></div>
							</li>
							</ul>
					
					<h4 class="pad25">Flickr Feed</h4>
					<div class="flickrs2">
						<div class="FlickrImagesBlog">
							<ul>
							</ul>
							</div>
								</div>
							</div>
						<div class="pad45"></div>
					</div>
				</div>
			</div>
			<div class="pad45 hidden-md hidden-lg"></div>
		<!--end-->
			
	<!--footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
					<!-- up to top -->
						<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
					<!--//end--> 
				
<!-- scripts -->
<script src="js/jquery.js"></script>			
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

<!-- FLICKR  - add your id - find it here - http://idgettr.com/-->
<script type="text/javascript">
//<![CDATA[

	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=60241562@N08&lang=en-us&format=json&jsoncallback=?", function(data){
		$.each(data.items, function(i,item){
			if(i<=8){ // <— change this number to display more or less images
				$("<img/>").attr("src", item.media.m.replace('_m', '_s')).appendTo(".FlickrImagesBlog ul")
				.wrap("<li><a href='" + item.link + "' target='_blank' title='Flickr'></a></li>");
			}
		});			
    });	
//]]>
</script>


</body>
</html>
